<template>
	<div>
		<el-card class="box-card">
			<el-row>
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>内容管理</el-breadcrumb-item>
					<el-breadcrumb-item>文章分类</el-breadcrumb-item>
				</el-breadcrumb>
			</el-row>
			<el-row>
				<el-button size="small" icon="el-icon-refresh" @click="getTopicTypes">刷新</el-button>
				<el-button size="small" icon="el-icon-plus" @click="open('ad')">添加</el-button>
			</el-row>
			<br />
			<el-table :data="topicTypes" height="640" style="width:100%;" :border="true" :stripe="true" :header-cell-style="{background:'#409EFF',color:'#FFF'}">
				<el-table-column width="100" label="编号" prop="tt_id" align="center"></el-table-column>
				<el-table-column label="分类名称" prop="tt_name" align="center"></el-table-column>
				<el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
				<el-table-column label="修改时间" prop="updateTime" align="center"></el-table-column>
				<el-table-column label="关联内容数量" prop="quantity" align="center"></el-table-column>
				<el-table-column label="操作" width="300" align="center">
					<template slot-scope="scope">
						<el-button icon="el-icon-edit" size="small" @click="open('up',scope.row)">修改</el-button>
						<el-button icon="el-icon-delete" size="small" @click="drupTopicType(scope.row.tt_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNumber"
			 :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
			</el-pagination>
		</el-card>
		<el-dialog :title="titleType" width="500px" :visible.sync="addFormVisible" :close-on-click-modal="false"
		 :close-on-press-escape="false" @close="cleaTopicType">
			<el-form :model="topicType" :rules="rules" ref="topicTypeRules" label-width="80px">
				<el-form-item label="分类名称" prop="ttName">
					<el-input v-model="topicType.ttName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="备注说明" prop="ttDetail">
					<el-input v-model="topicType.ttDetail" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addFormVisible = false">取 消</el-button>
				<el-button @click="upOrAddTopicType('ad')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getTopicTypeByPage,
		addOrEditTopicType,
		drupTopicType
	} from "network/content";

	export default {
		data() {
			return {
				topicTypes: [],
				pageSize: 20,
				pageNumber: 1,
				totalCount: 0,
				topicType: {
					ttId: '',
					ttName: '',
					ttDetail: '',
					createTime: '',
					updateTime: '',
					managerName:sessionStorage.getItem("manager_name"),
					flag:'',
					ttStatus:''
				},
				addFormVisible: false,
				titleType: "",
				rules: {
					ttName: [{
						required: true,
						message: '请输分类名称',
						trigger: 'blur'
					}],
					ttDetail: [{
						required: true,
						message: '请输分类备注',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			getTopicTypes() {
				getTopicTypeByPage({
					pageSize: this.pageSize,
					pageNumber: this.pageNumber,
				}).then(res => {
					console.log(res);
					this.topicTypes = res.data.list;
					this.totalCount = res.data.total;
				}).catch(err => {
					console.log(err);
				})
			},
			open(flag, rowData) {
				if (flag == 'ad') {
					this.flag = "添加文章分类";
					this.topicType.flag='add'
				} else if (flag == 'up') {
					console.log(rowData)
					this.topicType.ttId = rowData.tt_id;
					this.topicType.ttName = rowData.tt_name;
					this.topicType.ttDetail = rowData.tt_detail;
					this.topicType.createTime = rowData.createTime;
					this.topicType.updateTime = rowData.updateTime;
					this.flag = "修改文章分类";
					this.topicType.flag='edit'
				}
				this.addFormVisible = true;
			},
			cleaTopicType() {
				this.topicType.tt_id = "";
				this.topicType.tt_name = "";
				this.topicType.tt_detail = "";
				this.$refs["topicTypeRules"].resetFields();
			},
			upOrAddTopicType(flag) {
				let mes = "";
				if (flag == 'up')
					mes = '修改';
				else
					mes = '添加';
				console.log(flag)
				this.$refs["topicTypeRules"].validate((valid) => {
					if (valid) {
						console.log(this.topicType);
						addOrEditTopicType(this.topicType).then(res => {
							console.log(res)
							if (res.flag) {
								this.$message({
									type: 'success',
									message: mes + '成功'
								});
								this.getTopicTypes();
								this.addFormVisible = false;
							} else {
								this.$message({
									message: mes + '失败请联系管理!',
									type: 'warning'
								});
							}

						}).catch(err => {
							console.log(err);
						})
					} else {
						return console.log("add Or update Err");
					}
				})

			},
			drupTopicType(tt_id) {
				this.$confirm('此操作将永久删除该路径, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					drupTopicType({
						id: tt_id,
						managerName:sessionStorage.getItem("manager_name")
					}).then(res => {
						console.log(res);
						if (res.flag) {
							this.$message({
								type: 'success',
								message: '删除成功'
							});
							this.getTopicTypes();
						} else {
							this.$message({
								message: '删除失败请联系管理!',
								type: 'warning'
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//每页条数改变
			handleSizeChange(val) {
				this.pageSize = val;
				this.getAllTopics();
			},
			//页数改变
			handleCurrentChange(val) {
				this.pageNumber = val;
				this.getAllTopics();
			},
		},
		created() {
			this.getTopicTypes();
		}
	}
</script>

<style scoped>

</style>
